import type { FC } from 'react';
import { Form, Input } from 'antd';
import CommonModalForm from '@/components/CommonModalForm';

type TProps = {
  visible: boolean;
  confirmLoading: boolean;
  onSubmit: TAnyFunction;
  onCancel: TAnyFunction;
};

const CommonEditPassword: FC<TProps> = (props) => {
  const { visible, confirmLoading, onCancel, onSubmit } = props;
  const [form] = Form.useForm();

  // 校验第二次密码是否正确
  const validatePsw = ({ getFieldValue }: any) => {
    return {
      validator: (_: any, value: any) => {
        if (!value || getFieldValue('newPwd') === value) {
          return Promise.resolve();
        }
        return Promise.reject(new Error('两次输入密码不一致，请重新输入！'));
      },
    };
  };

  return (
    <CommonModalForm
      formRef={form}
      visible={visible}
      confirmLoading={confirmLoading}
      title={'修改密码'}
      onSubmit={onSubmit}
      onCancel={onCancel}
      formProps={{
        layout: 'vertical',
        autoComplete: 'off',
      }}
    >
      <Form.Item
        label="旧密码"
        name="oldPwd"
        rules={[{ required: true, message: '请输入旧密码!' }]}
      >
        <Input.Password placeholder="请输入旧密码" />
      </Form.Item>
      <Form.Item
        label="新密码"
        name="newPwd"
        rules={[{ required: true, message: '请输入新密码!' }]}
      >
        <Input.Password placeholder="请输入新密码" />
      </Form.Item>
      <Form.Item
        label="确认新密码"
        name="comfirmPassword"
        dependencies={['newPwd']}
        rules={[{ required: true, message: '请再次输入新密码!' }, validatePsw]}
      >
        <Input.Password placeholder="请再次输入新密码" />
      </Form.Item>
    </CommonModalForm>
  );
};

export default CommonEditPassword;
